<template>
	<view class="geren">
		<u-mask :show="show" @click="dian">
			<view class="warp" @touchmove.stop>
				<view class="rect" @tap.stop>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll">
						<view class="scroll-view-item">
							<view class="box">
								<view class="title">
									个人提现温馨提示：
								</view>
								<view class="c">
									个人提现时需缴纳个税，此项收入属于劳务报酬
									所得，其个人所得税应纳税额的计算公式为：
								</view>
								<view class="c">
									<view class="c1">
										1.每次收入不足4000元的:
									</view>
									<view class="c2">
										应纳税额=应纳税所得额x适用税率或=(每次收入
										额-800)x20%;
									</view>
									<text class="text">
										按次或当月收入不足800元的，当月免缴个人所得税！
									</text>
								</view>
								<view class="c">
									<view class="c1">
										2.每次收入在4000元以上的:
									</view>
									<view class="c2">
										应纳税额=应纳税所得额x适用税率或=每次收入
										额 x(1-20%)x20%;
									</view>
								</view>
								<view class="c">
									<view class="c1">
										3.每次收入的应纳税所得额超过20000元的:（加
										成征收）

									</view>
									<view class="c2">
										应纳税额=应纳税所得额x适用税率-速算扣除数
										或=每次收入额x(1-20%)x适用税率-速算扣除数；
									</view>
								</view>
								<view class="c">
									4.退税方式:次年可以在个人所得税app申请退税，
									年收入不满六万，全额退税;
								</view>
								<view class="c">
									<view class="c1 cc">
										5.个人多账号同一身份证提现时，按月合并扣税。
										一旦提现，身份证号和姓名信息无法更改;
									</view>
								</view>
								<view class="c">
									6.提现时请填写本人身份证信息，且与银行卡身
									份信息一致。请勿填写他人银行卡收款，否则税
									务风险自行承担。
								</view>
								<view class="table">
									<view class="tr trtr">
										<view class="th">级数</view>
										<view class="th">每次应纳所得税额</view>
										<view class="th">税率(%)</view>
										<view class="th">速算扣除(元)</view>
									</view>
									<view class="tr" v-for="(v,k) in list" :key="v.id">
										<view class="td">{{v.id}}</view>
										<view class="td">{{v.shui}}</view>
										<view class="td">{{v.shuilv}}</view>
										<view class="td">{{v.kouchu}}</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		name: "Gerentx",
		data() {
			return {
				show: true,
				list: [{
						id: 1,
						shui: '不超过20000元的部分',
						shuilv: '20',
						kouchu: '0'
					},
					{
						id: 2,
						shui: '超过20000~50000元的部分',
						shuilv: '30',
						kouchu: '2000'
					},
					{
						id: 3,
						shui: '超过50000元的部分',
						shuilv: '40',
						kouchu: '7000'
					}
				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			};
		},
		methods: {
			dian() {
				this.show = false
				this.$emit('showshow', this.show)
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style lang="less" scoped>
	.geren {
		z-index: 999;

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.rect {
				width: 75%;
				height: 800rpx;
				background-color: #fff;

				.scroll-Y {
					height: 800rpx;
					background-color: #fff;

					.box {
						width: 90%;
						margin: auto;
						padding-bottom: 20rpx;

						.title {
							font-weight: 600;
							font-size: 28rpx;
							line-height: 40rpx;
							color: #000000;
							margin-top: 32rpx;
						}

						.c {
							font-size: 28rpx;
							line-height: 40rpx;
							color: #333333;
							margin-top: 40rpx;

							.text {
								font-size: 24rpx;
								line-height: 34rpx;
								color: #FF5E5E;
							}

							.cc {
								color: #FF5E5E;
							}
						}

						.table {
							display: table;
							width: 100%;
							// border-collapse: collapse;
							border-collapse: separate;
							border-spacing: 0;
							margin: 40rpx 0 80rpx 0;

							.th {
								display: table-cell;
								font-weight: bold;
								height: 68rpx;
								text-align: center;
								vertical-align: middle;
								color: #000000;
								font-size: 24rpx;
								border: 1rpx solid #000000;

							}

							.tr {
								display: table-row;
								border: 1rpx solid #000000;
							}

							.td {
								display: table-cell;
								height: 68rpx;
								text-align: center;
								vertical-align: middle;
								font-size: 24rpx;
								color: #000000;
								border: 1rpx solid #000000;
							}

							.sub-table {
								width: 100%;
								display: table;
							}

							.sub-tr {
								display: table-row;
								height: 100%;
							}

							.sub-td {
								display: table-cell;
								height: 100%;
								text-align: center;
								vertical-align: middle;
							}
						}
					}
				}
			}
		}
	}
</style>